<div class="inspector" ng-if="activeVisual==group">
  <ng-include ng-init="mark = group;" src="'tmpl/inspectors/rect.html'"></ng-include>
</div>

<div ng-if="activeLayer == group || activeGroup == group">
  <h5>Axes <a class="close" vde-tooltip="New Axis" ng-click="addAxis(group)">&plus;</a></h5>

  <ul>
    <li ng-repeat="(axisName, axis) in group.axes">
      <h3 ng-class="{selected:activeVisual==axis}" class="editable-header">
        <span class="title" vde-edit-name ng-model="axis.displayName" ng-click="toggleVisual(axis)">{{axis.properties.title || axis.displayName}}</span>
        <a class="rename" ng-click="edit($event)"  vde-tooltip="Rename">Rename</a>
        <a class="delete close" vde-tooltip="Delete {{axis.displayName}}" ng-click="removeVisual('axes', axis.name, group)">&minus;</a>
      </h3>

      <div class="inspector" ng-if="activeVisual==axis">
        <ng-include src="'tmpl/inspectors/axis.html'"></ng-include>
      </div>
    </li>
  </ul>

  <h5>Marks</h5>

  <ul ui:sortable="gMdl.sortableOpts" ng:model="group.markOrder">
    <li ng-repeat="markName in group.markOrder" ng-controller="MarkCtrl">
      <h3 ng-click="toggleVisual(mark)" ng-class="{selected:activeVisual==mark}" class="editable-header">
        <span class="spinner" ng-if="mark.type == 'group' && activeGroup==group" ng-click="toggleGroup(mark)">&#9660;</span>
        <span class="spinner" ng-if="mark.type == 'group' && activeGroup!=group" ng-click="toggleGroup(mark)">&#9654;</span>

        <span class="title" vde-edit-name ng-model="mark.displayName">{{mark.displayName|inflector:'humanize'}}</span>
        <a class="rename" ng-click="edit($event)" vde-tooltip="Rename">Rename</a>
        <a class="delete close" vde-tooltip="Delete {{mark.displayName}}" ng-click="removeVisual('marks', mark.name, group)">&minus;</a>
      </h3>

      <div ng-class="{inspector: mark.type != 'group'}" ng-if="activeVisual==mark || mark.type == 'group' && activeGroup == mark">
        <div ng-if="activeVisual==mark">

          <div class="inner" ng-if="mark.type != 'group'">
            <br clear="all" />
            <vde-property label="Type" item="mark" style="full">
              <div class="btn-toolbar"><div class="btn-group">
                  <a ng-repeat="m in marks" class="btn-mini btn" href="#"
                      ng-class="{'btn-info': mark.type == m.toLowerCase()}"><i class="icon-mark icon-{{m}}" ng-click="changeMark(mark, m);">{{m}}</i></a>
              </div></div>
            </vde-property>
          </div>

          <!-- Automatically include pipeline selector -->
          <div class="heading">Pipeline</div>

          <div class="inner">
            <vde-property label="" nodrop="1" style="half">
              <span ng-hide="!mark.connectedTo.host"><code>{{mark.pipelineName|inflector:'humanize'}}</code></span>

              <select ng-model="gMdl.activeVisualPipeline" ng-change="setPipeline()" ng-show="!mark.connectedTo.host">
                <option value="">Select...</option>
                <option ng-repeat="(pipelineName, pipeline) in gMdl.pipelines" value="{{pipelineName}}" ng-selected="gMdl.activeVisualPipeline==pipelineName||activeVisual.pipelineName==pipelineName">{{pipeline.displayName|inflector:'humanize'}}</option>
                <option value="vdeNewPipeline">New Pipeline</option>
              </select>
            </vde-property>

            <vde-property label="" nodrop="1" style="half">
              <h3 class="addNew" ng-show="gMdl.activeVisualPipeline && !gMdl.showTransforms"
                  ng-click="gMdl.showTransforms = true;">+ Visual Layouts</h3>
            </vde-property>

            <br clear="all" />

            <div ng-if="pipeline.forkName">
              <vde-property label="Show" type="checkbox" hint="once per group"
                          item="mark" property="oncePerFork" ng-model="mark.oncePerFork"
                          nodrop="1" style="full" ng-click="reparse()"></vde-property>
            </div>
          </div>

          <!-- Show Transforms -->
          <div class="showTransforms" ng-show="gMdl.showTransforms">
            <div class="heading">
              New Visual Layout
              <a class="close" ng-click="gMdl.showTransforms = false">&times;</a>
            </div>

            <div class="inner">
              <a class="transform-pie btn btn-small" b ng-click="newTransform('Pie')">Pie Chart</a>
              <a class="transform-stack btn btn-small" ng-click="newTransform('Stack')">Stacked Layout</a>
              <a class="transform-geo btn btn-small" ng-click="newTransform('Geo')">Geographic</a>
              <a class="transform-force btn btn-small" ng-click="newTransform('Force')">Force-Directed Layout</a>
            </div>
          </div><!-- /show transforms -->

          <div ng-repeat="transform in pipeline.transforms" ng-if="transform.isVisual" class="inner">
            <div class="heading">
              {{transform.displayName}}
              <a class="close" vde-tooltip="Delete {{transform.displayName}}" ng-click="removeTransform($index)">&minus;</a>
            </div>

            <ng-include src="'tmpl/transforms/' + (transform.type|lowercase) + '.html'"></ng-include>
          </div>

          <div class="heading">Properties</div>
        </div>

        <ng-include src="'tmpl/inspectors/' + mark.type + '.html'"></ng-include>
      </div>
    </li>
  </ul>

</div><!-- /if activeLayer||activeGroup==group -->

